<template>
  <el-form label-width="100px" ref="formRef" :model="form" :rules="formRules">

    <el-row>
      <el-col :span="24">
        <el-form-item label="租户 Logo" prop="logo">
          <jcx-image-upload :file-type="['png', 'jpg']" :limit="1" v-model="form.logo" v-model:file-path="form.logo"
                            @update:file-path="form.logo = $event"></jcx-image-upload>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="租户标识" prop="code">
          <el-input :disabled="form.id && form.code === 'TEN_SUPER_TENANT'" clearable placeholder="请输入租户标识"
                    v-model="form.code"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="租户名称" prop="name">
          <el-input clearable placeholder="请输入租户名称" v-model="form.name"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="租户负责人" prop="userId">
          <el-select :disabled="form.id && form.code === 'TEN_SUPER_TENANT'" style="width: 100%" clearable
                     v-model="form.userId" placeholder="请选择租户负责人">
            <el-option v-for="item in userList" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="数据源" prop="sourceId">
          <el-select :disabled="form.id && form.code === 'TEN_SUPER_TENANT'" style="width: 100%" clearable
                     v-model="form.sourceId" placeholder="请选择数据源">
            <el-option v-for="item in sourceList" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="联系电话" prop="phone">
          <el-input clearable placeholder="请输入联系电话" v-model="form.phone"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系邮箱" prop="email">
          <el-input clearable placeholder="请输入部门邮箱" v-model="form.email"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="开始时间" prop="startDate">
          <el-date-picker :disabled="form.id && form.code === 'TEN_SUPER_TENANT'" clearable style="width: 100%"
                          type="datetime" placeholder="系统开始时间" value-format="YYYY-MM-DD HH:MM:ss"
                          v-model="form.startDate">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="到期时间" prop="endDate">
          <el-date-picker :disabled="form.id && form.code === 'TEN_SUPER_TENANT'" clearable style="width: 100%"
                          type="datetime" placeholder="系统到期时间" value-format="YYYY-MM-DD HH:MM:ss"
                          v-model="form.endDate">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row v-if="form.code !== 'TEN_SUPER_TENANT'">
      <el-col :span="24">
        <el-form-item label="菜单权限" prop="menuIdList">
          <el-tree-select ref="menuTreeSelect" size="large" clearable multiple show-checkbox check-strictly
                          highlight-current collapse-tags collapse-tags-tooltip check-on-click-node node-key="id"
                          style="width: 100%" :render-after-expand="false" :data="menuList" :props="categoryProps"
                          v-model="form.menuIdList" placeholder="请选择菜单"></el-tree-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="是否启用" prop="enabled">
          <el-radio-group v-model="form.enabled" :disabled="form.id && form.code === 'TEN_SUPER_TENANT'">
            <el-radio-button :value="true" border>启用</el-radio-button>
            <el-radio-button :value="false" border>停用</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="form.sort" :min="1" controls-position="right" size="large"
                           placeholder="请输入排序"></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="form.remark" clearable placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="js">
import {onMounted, reactive, ref} from "vue";
import tree from "@/utils/tree";
import sourceApi from "@/api/system/source";
import userApi from "@/api/system/user";
import menuApi from "@/api/system/menu";

const props = defineProps({
  form: {
    type: Object,
    default: {}
  }
})
const formRef = ref(null);
const categoryProps = {
  label: (data) => data.name + "-" + data.code,
  children: 'children',
}
const sourceList = ref([]);
const userList = ref([]);
const menuList = ref([]);
const formRules = reactive({
  logo: [{required: true, message: "租户【Logo】为必填项", trigger: "blur"}],
  code: [{required: true, message: "租户标识为必填项", trigger: "blur"}],
  name: [{required: true, message: "租户名称为必填项", trigger: "blur"}],
  userId: [{required: true, message: "租户负责人ID为必填项", trigger: "blur"}],
  sourceId: [{required: true, message: "租户数据源ID为必填项", trigger: "blur"}],
  phone: [{required: true, message: "租户联系电话为必填项", trigger: "blur"}],
  email: [{required: true, message: "租户联系邮箱为必填项", trigger: "blur"}],
  startDate: [{required: true, message: "租户开始时间为必填项", trigger: "blur"}],
  endDate: [{required: true, message: "租户到期时间为必填项", trigger: "blur"}],
  sort: [{required: true, message: "排序为必填项", trigger: "blur"}],
  enabled: [{required: true, message: "是否启用为必填项", trigger: "blur"}],
  menuIdList: [{required: true, message: "菜单权限为必填项", trigger: "blur"}],
});
const getFormRef = () => {
  return formRef.value;
}

onMounted(() => {
  sourceApi.lists.get({enabled: true}).then(response => {
    sourceList.value = response.data.list;
  })
  userApi.lists.get({enabled: true}).then(response => {
    userList.value = response.data.list;
  })
  menuApi.lists.get({enabled: true, onlyPlatform: true}).then(response => {
    menuList.value = tree.buildTree(response.data.list);
  })
});

defineExpose({getFormRef});
</script>

<style scoped lang="scss">
</style>
